import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { Divider, Button } from "@rneui/themed";
import { useSelector, useDispatch } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import { sectokenAccountChangeProps } from '@/config/navigatorProps'
import { PayWithArray } from '@/config/config'
import SelectedImg from '@/assets/safe/selected.png'
import { getValue } from '@/utils/deviceStorage'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenAccountChange = (props) => {

    const dispatch = useDispatch();
    const [safeWalletList, setSafeWalletList] = useState([]);
    const selectedSafeWallet = useSelector((state) => state.sectokenMainReducer.selectedSafeWallet);

    useEffect(() => {
        let list = getValue('safeWalletList')
        setSafeWalletList(list)
    }, []);

    const handlePressCreate = () => {
        props.navigation.navigate('safe-no-account')
    }

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressItem = (item) => {
        dispatch({ type: "setSelectedSafeWallet", value: item });
        props.navigation.navigate({
            name: 'safe-main',
            params: {
                load: true
            }
        })
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenAccountChangeProps} handlePressLeft={handlePressLeft} />
            <View style={{ justifyContent: 'center', alignItems: 'flex-start', height: 43 * ratio, marginLeft: 33 * ratio }}>
                <Button type='clear' onPress={handlePressCreate}>
                    <Text style={{ ...styles.title1, color: '#0A6EEB' }}>Add Safe</Text>
                </Button>
            </View>
            <View style={styles.divider}></View>
            {safeWalletList ? safeWalletList.map((item, index) => {
                const isSelected = selectedSafeWallet.id === item.id ? true : false
                return (
                    <View key={index}>
                        <TouchableOpacity style={styles.itemContent} onPress={() => { handlePressItem(item) }}>
                            <View style={{ flex: 8, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <Image source={PayWithArray[item.profileImg]} style={styles.img1} />
                                <View style={{ marginLeft: 11 * ratio }}>
                                    <Text
                                        ellipsizeMode='middle'
                                        numberOfLines={1}
                                        style={styles.title1}>
                                        {item.label}
                                    </Text>
                                    <Text
                                        ellipsizeMode='middle'
                                        numberOfLines={1}
                                        style={styles.title2}>
                                        {item.address}
                                    </Text>
                                </View>
                            </View>
                            {isSelected ?
                                <View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-end' }}>
                                    <Image source={SelectedImg} style={styles.img2} />
                                </View> : null}
                        </TouchableOpacity>
                        <Divider color='#EFEFEF' />
                    </View>
                )
            }) : null}
            <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                <TouchableOpacity style={styles.exitContent} onPress={() => { props.navigation.navigate('main') }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Image style={{ width: 15 * ratio, height: 16 * ratio, marginRight: 7 * ratio }} source={require('@/assets/safe/exit.png')} />
                        <Text style={styles.title3}>BTC</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    exitContent: {
        width: width,
        height: 47 * ratio,
        backgroundColor: '#F5F6FA',
        justifyContent: 'center',
        alignItems: 'center'
    },
    itemContent: {
        height: 62 * ratio,
        flexDirection: 'row'
    },
    img1: {
        width: 40 * ratio,
        height: 40 * ratio,
        marginLeft: 16 * ratio
    },
    img2: {
        width: 19 * ratio,
        height: 14 * ratio,
        marginRight: 16 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        width: 180 * ratio,
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 18
    },
    title3: {
        fontSize: 13,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#0069F6',
        lineHeight: 19
    },
    divider: {
        width: width,
        height: 8 * ratio,
        backgroundColor: '#F5F6FA'
    }
})
export default SectokenAccountChange